'use client'

import { motion } from 'framer-motion'

export function PostCardSkeleton() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="bg-white rounded-lg shadow-sm overflow-hidden"
    >
      {/* 作者信息骨架 */}
      <div className="p-3 flex items-center space-x-2">
        <div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse" />
        <div className="flex-1 space-y-1">
          <div className="h-3 bg-gray-200 rounded animate-pulse w-20" />
          <div className="h-2 bg-gray-200 rounded animate-pulse w-12" />
        </div>
      </div>

      {/* 图片骨架 */}
      <div className="aspect-[3/4] bg-gray-200 animate-pulse" />

      {/* 内容骨架 */}
      <div className="p-3 space-y-2">
        <div className="h-4 bg-gray-200 rounded animate-pulse w-3/4" />
        <div className="h-3 bg-gray-200 rounded animate-pulse w-full" />
        <div className="h-3 bg-gray-200 rounded animate-pulse w-2/3" />
        
        {/* 标签骨架 */}
        <div className="flex space-x-1 mt-2">
          <div className="h-5 bg-gray-200 rounded-full animate-pulse w-12" />
          <div className="h-5 bg-gray-200 rounded-full animate-pulse w-10" />
          <div className="h-5 bg-gray-200 rounded-full animate-pulse w-14" />
        </div>
        
        {/* 操作按钮骨架 */}
        <div className="flex items-center justify-between mt-3">
          <div className="flex space-x-3">
            <div className="h-4 bg-gray-200 rounded animate-pulse w-12" />
            <div className="h-4 bg-gray-200 rounded animate-pulse w-12" />
            <div className="h-4 bg-gray-200 rounded animate-pulse w-8" />
          </div>
          <div className="h-4 bg-gray-200 rounded animate-pulse w-8" />
        </div>
      </div>
    </motion.div>
  )
}
